'use strict';
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    ListView,
    RefreshControl,
} from 'react-native';
import Global from '../Commom/GlobalConst';
import ScrollableTabView, {
    DefaultTabBar,
    ScrollableTabBar
} from 'react-native-scrollable-tab-view';
import Toast from '../Utils/toast';
import CountryHomePage from './CountryHomePage';
import StayDetailsPage from './StayDetailsPage';
import SpecialtyDetailsPage from './SpecialtyDetailsPage';
import PlayDetailsPage from './PlayDetailsPage';
import UserAPIService from "../Commom/UserAPIService";
export default class MyCollectionPage extends Component {
    constructor(props) {
        super(props);
        var dataSourceListData = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        var dataSourceListDataBuOne = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        var dataSourceListDataBuTwo = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        var dataSourceListDataBuThree = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        var dataSourceListDataBuFour = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSourceList: dataSourceListData,
            dataSourceListByOne: dataSourceListDataBuOne,
            dataSourceListByTwo: dataSourceListDataBuTwo,
            dataSourceListByThree: dataSourceListDataBuThree,
            dataSourceListByFour: dataSourceListDataBuFour,
            listDataType: 0,
            isRefreshing: false,
        }
        ;
        this.CollectionDataRow = this.CollectionDataRow.bind(this);
    }

    componentDidMount() {
        console.log(Global.Const.token);
        console.log(Global.Const.registeredId);
        UserAPIService.collectionList(Global.Const.token, Global.Const.registeredId, 1).then((ret)=> {
            var allData = ret.result;
            var nowListDataOne = [];
            var nowListDataTwo = [];
            var nowListDataThree = [];
            var nowListDataFour = [];
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 0) {
                    nowListDataOne.push(allData[i]);
                }
            }
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 1) {
                    nowListDataTwo.push(allData[i]);
                }
            }
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 2) {
                    nowListDataThree.push(allData[i]);
                }
            }
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 3) {
                    nowListDataFour.push(allData[i]);
                }
            }
            this.setState({
                dataSourceList: this.state.dataSourceList.cloneWithRows(ret.result),
                dataSourceListByOne: this.state.dataSourceListByOne.cloneWithRows(nowListDataOne),
                dataSourceListByTwo: this.state.dataSourceListByTwo.cloneWithRows(nowListDataTwo),
                dataSourceListByThree: this.state.dataSourceListByThree.cloneWithRows(nowListDataThree),
                dataSourceListByFour: this.state.dataSourceListByFour.cloneWithRows(nowListDataFour),
            });
        }).catch((err)=> {

        });

    }

    BackAction() {
        this.props.navigator.pop();
    }

    ClickAction(number, id) {
        switch (number) {
            case 0:
                //乡村主页
                this.props.navigator.push({
                    id: 'CountryHomePage',
                    component: CountryHomePage,
                    passProps: {
                        ID: id
                    },
                });
                break;
            case 1:
                //游玩主页
                this.props.navigator.push({
                    id: 'PlayDetailsPage',
                    component: PlayDetailsPage,
                    passProps: {
                        ID: id
                    },
                });
                break;
            case 2:
                //特产主页
                this.props.navigator.push({
                    id: 'SpecialtyDetailsPage',
                    component: SpecialtyDetailsPage,
                    passProps: {
                        ID: id
                    },
                });
                break;
            case 3:
                //住宿主页
                this.props.navigator.push({
                    id: 'StayDetailsPage',
                    component: StayDetailsPage,
                    passProps: {
                        ID: id
                    },
                });
                break;
        }
    }

    //刷新数据
    onRefreshData() {
        this.setState({
            isRefreshing: true,
        });
        UserAPIService.collectionList(Global.Const.token, Global.Const.registeredId, 1).then((ret)=> {
            var allData = ret.result;
            var nowListDataOne = [];
            var nowListDataTwo = [];
            var nowListDataThree = [];
            var nowListDataFour = [];
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 0) {
                    nowListDataOne.push(allData[i]);
                }
            }
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 1) {
                    nowListDataTwo.push(allData[i]);
                }
            }
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 2) {
                    nowListDataThree.push(allData[i]);
                }
            }
            for (let i = 0; i < allData.length; i++) {
                if ((allData[i].type) == 3) {
                    nowListDataFour.push(allData[i]);
                }
            }
            this.setState({
                isRefreshing: false,
                dataSourceList: this.state.dataSourceList.cloneWithRows(ret.result),
                dataSourceListByOne: this.state.dataSourceListByOne.cloneWithRows(nowListDataOne),
                dataSourceListByTwo: this.state.dataSourceListByTwo.cloneWithRows(nowListDataTwo),
                dataSourceListByThree: this.state.dataSourceListByThree.cloneWithRows(nowListDataThree),
                dataSourceListByFour: this.state.dataSourceListByFour.cloneWithRows(nowListDataFour),
            });
            Toast.show('刷新成功');
        }).catch((err)=> {
            this.setState({
                isRefreshing: false,
            });
        });
    }


    //加载更多数据
    loadMoreData() {

    }


    //列表数据显示类型
    listDataType(postion) {
        if (postion == 0 || postion == 1 || postion == 2 || postion == 3 || postion == 4) {
            this.setState({
                listDataType: postion,
            });
        }
    }

    //text标签view
    labelTextView(type) {
        if (this.state.listDataType == 0) {
            switch (type) {
                case 0:
                    return (
                        <View
                            style={{position:'absolute',right:12,top:12,width:18,height:18}}>
                            <Image
                                style={{width:18,height:18,resizeMode:'contain'}}
                                source={ require('../../Image/main/icon_rural_green.png')}></Image>
                        </View>
                    )
                    break;
                case 1:
                    return (
                        <View
                            style={{position:'absolute',right:12,top:12,width:18,height:18}}>
                            <Image
                                style={{width:18,height:18,resizeMode:'contain'}}
                                source={ require('../../Image/main/icon_fun_yellow.png')}></Image>
                        </View>
                    )
                    break;
                case 2:
                    return (
                        <View
                            style={{position:'absolute',right:12,top:12,width:18,height:18}}>
                            <Image
                                style={{width:18,height:18,resizeMode:'contain'}}
                                source={ require('../../Image/main/icon_specialty_purple.png')}></Image>
                        </View>
                    )
                    break;
                case 3:
                    return (
                        <View
                            style={{position:'absolute',right:12,top:12,width:18,height:18}}>
                            <Image
                                style={{width:18,height:18,resizeMode:'contain'}}
                                source={ require('../../Image/main/icon_zhusu_pink.png')}></Image>
                        </View>
                    )
                    break;
            }
        } else {
            return null;
        }

    }

    CollectionDataRow(rowData) {
        return (
            <View >
                <TouchableOpacity activeOpacity={0.5}
                                  onPress={()=>this.ClickAction(rowData.type,rowData.rural_id)}>
                    <View
                        style={{width:Global.Const.size.width,height:110,flexDirection:'row',alignItems:'center',backgroundColor:'white'}}>
                        <Image style={{width:80,height:80,marginLeft:10,marginRight:10}}
                               source={{uri:rowData.rural_image}}></Image>
                        <View style={{width:Global.Const.size.width-110,height:100}}>
                            <Text
                                style={{fontSize:14,color:Global.FontColor.DimGray,marginTop:12}}>{rowData.rural_title}</Text>
                            <View style={{flexDirection:'row',marginTop:10,alignItems:'center'}}>
                                <Text style={{fontSize:12,color:Global.FontColor.DarkGray}}>{rowData.town}</Text>
                                <View
                                    style={{height:12,width:1,backgroundColor:Global.FontColor.LightGrey,marginLeft:5,marginRight:5}}></View>
                                <Text style={{fontSize:12,color:'red'}}>{rowData.been_to}</Text>
                                <Text style={{fontSize:12,color:Global.FontColor.DarkGray}}>人去过</Text>
                            </View>
                            <Text numberOfLines={1}
                                  style={{marginTop:8,fontSize:12,color:Global.FontColor.DarkGray}}>{rowData.introduce}</Text>
                        </View>
                        {this.labelTextView(rowData.type)}
                    </View>
                    <View
                        style={{width:Global.Const.size.width,height:20,backgroundColor:Global.Const.transparent}}></View>
                </TouchableOpacity>
            </View>
        );
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={{width:Global.Const.size.width,height:65,backgroundColor:'white'}}>

                    <View style={{marginTop:24,alignItems:'center'}}>

                        <View style={{width:21,height:21,position:'absolute',left:12,top:3}}>
                            <TouchableOpacity activeOpacity={0.5}
                                              onPress={()=>this.BackAction()}>
                                <Image style={{resizeMode:'contain',width:21,height:21}}
                                       source={require('../../Image/icon_back.png')}></Image>
                            </TouchableOpacity>
                        </View>
                        <Text style={{fontSize:20,color:Global.FontColor.DimGray}}>我的收藏</Text>
                    </View>
                </View>
                <View style={{backgroundColor:'white',flex:1,borderTopWidth:2,borderColor:Global.Const.transparent}}>
                    <ScrollableTabView
                        renderTabBar={
                            () => <DefaultTabBar
                            textStyle={{ fontSize: 15,marginTop: 8}}
                            style={{height:40,borderBottomColor: '#F5F5F5'}}/>}
                        tabBarUnderlineStyle={{backgroundColor: '#24CD78',height:3}}
                        tabBarUnderlineColor={'#FF0000'}
                        tabBarActiveTextColor={'#24CD78'}
                        tabBarInactiveTextColor={'#333333'}
                        tabBarPosition='top'
                        onChangeTab={(obj) => {
                                   this.listDataType(obj.i)
                                }
                              }
                    >
                        <View tabLabel="全部">
                            <ListView
                                style={{height:Global.Const.size.height-105}}
                                refreshControl={
                                          <RefreshControl
                                            refreshing={this.state.isRefreshing}
                                            onRefresh={() => {this.onRefreshData()}}
                                           colors={['#4CAF50', '#4CAF50', '#4CAF50', '#4CAF50']}
                                            progressBackgroundColor="white"
                                          /> }
                                onEndReachedThreshold={50}
                                onEndReached={() => {this.loadMoreData()}}

                                enableEmptySections={true}
                                dataSource={this.state.dataSourceList} renderRow={this.CollectionDataRow.bind(this)}/>
                        </View>
                        <View tabLabel="乡村">
                            <ListView
                                style={{height:Global.Const.size.height-105}}
                                refreshControl={
                                          <RefreshControl
                                            refreshing={this.state.isRefreshing}
                                            onRefresh={() => {this.onRefreshData()}}
                                            colors={['#4CAF50', '#4CAF50', '#4CAF50', '#4CAF50']}
                                            progressBackgroundColor="white"
                                          /> }
                                onEndReachedThreshold={50}
                                onEndReached={() => {this.loadMoreData()}}

                                enableEmptySections={true}
                                dataSource={this.state.dataSourceListByOne}
                                renderRow={this.CollectionDataRow.bind(this)}/>
                        </View>
                        <View tabLabel="游玩">
                            <ListView
                                style={{height:Global.Const.size.height-105}}
                                refreshControl={
                                          <RefreshControl
                                            refreshing={this.state.isRefreshing}
                                            onRefresh={() => {this.onRefreshData()}}
                                           colors={['#4CAF50', '#4CAF50', '#4CAF50', '#4CAF50']}
                                            progressBackgroundColor="white"
                                          /> }
                                onEndReachedThreshold={50}
                                onEndReached={() => {this.loadMoreData()}}

                                enableEmptySections={true}
                                dataSource={this.state.dataSourceListByTwo}
                                renderRow={this.CollectionDataRow.bind(this)}/>
                        </View>
                        <View tabLabel="特产">
                            <ListView
                                style={{height:Global.Const.size.height-105}}
                                refreshControl={
                                          <RefreshControl
                                            refreshing={this.state.isRefreshing}
                                            onRefresh={() => {this.onRefreshData()}}
                                            colors={['#4CAF50', '#4CAF50', '#4CAF50', '#4CAF50']}
                                            progressBackgroundColor="white"
                                          /> }
                                onEndReachedThreshold={50}
                                onEndReached={() => {this.loadMoreData()}}

                                enableEmptySections={true}
                                dataSource={this.state.dataSourceListByThree}
                                renderRow={this.CollectionDataRow.bind(this)}/>
                        </View>
                        <View tabLabel="住宿">
                            <ListView
                                style={{height:Global.Const.size.height-105}}
                                refreshControl={
                                          <RefreshControl
                                            refreshing={this.state.isRefreshing}
                                            onRefresh={() => {this.onRefreshData()}}
                                           colors={['#4CAF50', '#4CAF50', '#4CAF50', '#4CAF50']}
                                            progressBackgroundColor="white"
                                          /> }
                                onEndReachedThreshold={50}
                                onEndReached={() => {this.loadMoreData()}}

                                enableEmptySections={true}
                                dataSource={this.state.dataSourceListByFour}
                                renderRow={this.CollectionDataRow.bind(this)}/>
                        </View>
                    </ScrollableTabView>
                </View>
            </View>
        );
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Global.Const.transparent,
    },
});